<template>
<div class="rx-mobile-button-box">
    <div class="rx-mobile-grid-box">
        <div class="table-operator">
            <div>{{$sharei18('form.columnStyle','操作列风格')}}</div>
            <div class="button-from-list">
                <div class="button-from" @click="disposition(1)" :class="[styleButton=='1'?'button-from-hover':'']">
                    <span style="border-right: 1px solid #dadde0">{{$ti18('rxList.editBtn','编辑')}}</span>
                    <span>{{$ti18('rxList.delBtn','删除')}}</span>
                    <my-icon v-if="styleButton=='1'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
                <div class="button-from" @click="disposition(2)" :class="[styleButton=='2'?'button-from-hover':'']">
                    <span><my-icon type="iconedit"></my-icon>{{$ti18('rxList.editBtn','编辑')}}</span>
                    <span><my-icon type="icontrash"></my-icon>{{$ti18('rxList.delBtn','删除')}}</span>
                    <my-icon v-if="styleButton=='2'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
                <div class="button-from" @click="disposition(3)" :class="[styleButton=='3'?'button-from-hover':'']">
                    <a-button style="margin-right: 10px" size="small" type="primary">{{$ti18('rxList.editBtn','编辑')}}</a-button>
                    <a-button size="small">{{$ti18('rxList.delBtn','删除')}}</a-button>
                    <my-icon v-if="styleButton=='3'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
                <div class="button-from" @click="disposition(4)" :class="[styleButton=='4'?'button-from-hover':'']">
                    <a-button style="margin-right: 10px" size="small" type="primary"><my-icon type="iconedit"></my-icon>{{$ti18('rxList.editBtn','编辑')}}</a-button>
                    <a-button size="small"><my-icon type="icontrash"></my-icon>{{$ti18('rxList.delBtn','删除')}}</a-button>
                    <my-icon v-if="styleButton=='4'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
                <div class="button-from" @click="disposition(5)" :class="[styleButton=='5'?'button-from-hover':'']">
                    <my-icon type="iconedit" style="margin-right: 10px;color: #1890ff"></my-icon>
                    <my-icon type="icontrash" style="color: #1890ff"></my-icon>
                    <my-icon v-if="styleButton=='5'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
                <div class="button-from" @click="disposition(6)" :class="[styleButton=='6'?'button-from-hover':'']">
                    <a-button style="margin-right: 10px" size="small" type="primary"><my-icon type="iconedit"></my-icon></a-button>
                    <a-button size="small"><my-icon type="icontrash"></my-icon></a-button>
                    <my-icon v-if="styleButton=='6'" class="rx-card-item-imgbox" type="iconright"></my-icon>
                </div>
            </div>
            <div>{{ $sharei18('list.maxButton','最大按钮显示数') }}</div>
            <div class="button-input-number">
                <div style="width: 120px;margin-right: 10px"><a-input-number v-model="maxButton" /></div>
                <div style="flex: 1;opacity:0.4;">{{ $sharei18('tips.maximumTip','操作列最多显示的按钮数量，超出的显示在更多里') }}</div>
            </div>
        </div>
        <div class="rx-mobile-grid-toolbar">
            <a-button type="primary" @click="addButton">{{i18n('isButton.addButton','新增按钮')}}</a-button>
            <a-button class="rx-modile-button" @click="addDefButton">{{i18n('isButton.addAllDefaults','新增全部默认')}}</a-button>
            <a-button class="rx-modile-del" @click="removeRow">{{i18n('isButton.deleteButton','删除按钮')}}</a-button>
            <a-button class="rx-modile-button" @click="upRow">{{i18n('isButton.upward','向上')}}</a-button>
            <a-button class="rx-modile-button" @click="downRow">{{i18n('isButton.downward','向下')}}</a-button>
        </div>
        <div class="rx-mobile-grid-container">
            <rx-grid
                class="table_toolBar"
                ref="customBtn"
                :dataSource="mobileBtns"
                :columns="mobileBtnColumns"
                :allowRowSelect="true"
                :multiSelect="true"
                :showPage="false"
                :bordered="true"
                style="min-height: 230px"
            >
                <span slot="btnLabel" slot-scope="{text,record,index}">
                    <a-input v-model="record.btnLabel" @change="updateI18nName(record,'btnLabel')">
                        <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName(record,'btnLabel')"/>
                    </a-input>
                </span>
                <span slot="btnName" slot-scope="{text,record,index}">
                    <a-input v-model="record.btnName" />
                </span>
                <span slot="btnIcon" slot-scope="{text,record,index}">
                    <rx-input-icon v-model="record.btnIcon" @change="iconChange($event,record)"></rx-input-icon>
                </span>
                <span slot="buttonStyle" slot-scope="{text,record,index}">
                    <a-select :getPopupContainer="(p)=>p.parentNode" :placeholder="'状态'" v-model="record.buttonStyle" :allowClear="true" style="width: 100%;" >
                        <a-select-option v-for="item in buttonStyles" :key="item.key"
                                         :value="item.key">{{item.text}}
                        </a-select-option>
                      </a-select>
                </span>
                <span slot="btnClick" slot-scope="{text,record,index}">
                    <template v-if="record.isDefault">{{record.btnClick}}</template>
                    <template v-else>
                        <a-input v-model="record.btnClick" />
                    </template>
                </span>
                <span slot="btnType" slot-scope="{text,record,index}">
                    <template v-if="record.isDefault">
                      {{record.btnType_name}}
                    </template>
                </span>
                <span slot="btnPreCond" slot-scope="{text,record,index}">
                    <a-button v-if="record.btnClick=='custBtnMoreBtn'" size="small" @click="openPreCondSetting(record)">{{i18n('list.config','配置')}}</a-button>
                    <span v-if="record.isSetedPreCondition" class="is-seted"><i
                        class="iconfont iconsuccess_fill is-seted"></i>{{i18n('list.configured','已配')}}</span>
                    <a-icon v-if="record.isSetedPreCondition" type="delete" style="margin-left: 10px;" @click="clearPreCondition(record)"/>
                </span>

            </rx-grid>
        </div>
    </div>
</div>
</template>

<script>
import {RxGrid, Util,Dialog,I18Parse} from "@lowcode/jpaas-common-lib";
import CustomButtonMoreConfig from "./CustomButtonMoreConfig.vue";
import rxInputIcon from "@/components/rxComponent/rx-input-icon.vue";
export default {
    name: "CustomButton",
    props: {
        customConfig: Object,
    },
    components:{
        RxGrid,rxInputIcon
    },
    data(){
        return {
            vm:null,
            activeKey:'customBtn',
            gridData:[],
            mobileBtns:[],
            selectedRowKeys:[],
            selectedRows:[],
            mobileBtnColumns:[
                {title: this.i18n('form.buttonName','按钮名称'), dataIndex: 'btnLabel', width: 80 , scopedSlots: {customRender: 'btnLabel'}},
                {title: this.i18n('form.buttonMark','按钮标识'), dataIndex: 'btnName', width: 80 ,  scopedSlots: {customRender: 'btnName'}},
                {title: this.i18n('form.buttonIcon','按钮图标'), dataIndex: 'btnIcon', width: 50 , scopedSlots: {customRender: 'btnIcon'}},
                {title: this.$sharei18('form.buttonStyle','按钮风格'), dataIndex: 'buttonStyle', width: 70 , scopedSlots: {customRender: 'buttonStyle'}},
                {title: this.i18n('form.eventFunc','事件函数'), dataIndex: 'btnClick', width: 80 ,  scopedSlots: {customRender: 'btnClick'}},
                {title: this.i18n('form.buttonConfiguration','按钮配置'), dataIndex: 'btnPreCond', width: 80 , scopedSlots: {customRender: 'btnPreCond'}}
            ],
            defMobileBtns:[],
            isI18nLang:process.env.VUE_APP_ISLANGUAGE,
            i18nDefault:process.env.VUE_APP_LANGUAGE,
            i18nCurrent:"",
            i18nJson:{},
            i18nMenuName:"",
            defaultBtnI18ns:{
                onMobileAdd:{
                    "zh-CN":"新增",
                    "en-US":"New",
                    "ja-JP":""
                },
                onMobileEdit:{
                    "zh-CN":"编辑",
                    "en-US":"Edit",
                    "ja-JP":"編集"
                }
            },
            maxButton:2,
            styleButton:1,
            olumnsControls:[
                {title:this.$sharei18('form.buttonStyle','按钮风格'), dataIndex: 'buttonStyle',scopedSlots: {customRender: 'buttonStyle'},width:100},
                {title:this.$sharei18('form.icon','图标'), dataIndex: 'icon',scopedSlots: {customRender: 'icon'},width:80}
            ],
            buttonStyles:[
                {
                    key:"primary",text:"primary"
                },
                {
                    key:"default",text:"default"
                },
                {
                    key:"dashed",text:"dashed"
                },
                {
                    key:"danger",text:"danger"
                }],
        }
    },
    computed:{
        showDefaultButton(){
            if(this.vm && this.vm.mdl && this.vm.mdl.isDialog=='NO' ){
                return true;
            }
            return false;
        }
    },
    created(){
        this.getCurrentI18n();
        this.init();
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"FormCalendarView",key);
        },
        disposition(index){
            this.styleButton = index;
        },
        init(){
            if(!this.customConfig ){
                return;
            }
            this.maxButton = this.customConfig.maxButton || 2;
            this.styleButton = this.customConfig.styleButton || 1;
            this.mobileBtns = this.customConfig.btnConfig || [];
        },
        iconChange(icon,record){
            delete record['btnIcon_name'];
            if(icon){
                let iconJson=JSON.parse(icon);
                record['btnIcon_name']=iconJson.icon;
            }
        },
        getCurrentI18n(){
            this.i18nCurrent= window.localStorage.getItem("language");
            if(!this.i18nCurrent){
                this.i18nCurrent=this.i18nDefault;
            }
        },
        editI18nName(record,col) {
            let self_ = this;
            let row =record;
            let conifg = {
                curVm: this,
                widthHeight: ['600px', '400px'],
                data: {
                    i18nJson: this.getI18nJson(row,col)
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                self_.$set(row, col, data[self_.i18nCurrent]);
                self_.$set(row, "i18nJson", JSON.stringify(data));
            });
        },
        getI18nJson(row,col){
            let i18nJson={};
            let i18nConf =row.i18nJson;
            if(i18nConf){
                i18nJson=JSON.parse(i18nConf);
                let val=i18nJson[this.i18nCurrent];
                if(!val){
                    i18nJson[this.i18nCurrent]=row[col];
                }
            }else {
                i18nJson[this.i18nCurrent] = row[col];
                i18nJson[this.i18nDefault] = row[col];
            }
            return i18nJson;
        },
        updateI18nName(record, col) {
            let i18nJson=this.getI18nJson(record,col);
            i18nJson[this.i18nCurrent]=record[col];
            this.$set(record, "i18nJson", JSON.stringify(i18nJson));
        },
        getData(){
            var data=this.$refs.customBtn.getData();
            if(this.isNotUnionBtnName(data)){
                return {success:false,message:this.i18n('notSetSame','不可设置同标识按钮！')};
            }
            return {
                success:true,
                data: {
                    btnConfig:data,
                    maxButton:this.maxButton,
                    styleButton:this.styleButton
                }
            };
        },
        isNotUnionBtnName(ary){
            var arr=[];
            for(var i=0;i<ary.length;i++){
                if(arr.includes(ary[i].btnName)){
                    return true;
                }
                arr.push(ary[i].btnName);
            }
            return false;
        },
        loadInitI18nVal(obj,text){
            if(!obj.i18nJson){
                let i18nJson = {};
                i18nJson[this.i18nCurrent]=obj[text];
                obj.i18nJson=JSON.stringify(i18nJson);
                return;
            }
            let i18nJson =JSON.parse(obj.i18nJson);
            let val=i18nJson[this.i18nCurrent];
            if(!val){
                return;
            }
            obj[text]=val;
        },
        addButton(){
            //添加按钮
            this.addRow( {btnId:Util.randomId(),btnLabel:'',isDefault:false,btnType:'row',btnType_name:this.i18n('isButtonSizeMap.row','行内'),btnName:'',btnClick:'',permission:{label:this.i18n('all','所有人'),value:"everyone"}})
        },
        addRow(row){
            this.$refs.customBtn.addRow(row);
        },
        addDefButton(){
            let lang = I18Parse.getCurrentLang();
            let i18nJson ={};
            if(!this.getDefBtn('custBtnMoreBtn')){
                let icon ={
                    type:"userCustomIcon",
                    icon:"icon-share"
                }
                i18nJson[lang]=this.i18n('form.jump','跳转');
                let  moveBtn = {btnId:Util.randomId(),btnLabel:this.i18n('form.jump','跳转'),btnIcon:JSON.stringify(icon),
                    i18nJson:JSON.stringify(i18nJson),isDefault:true,btnType:'row',btnName:'custBtn_moreBtn',btnClick:'custBtnMoreBtn',buttonStyle:'primary'};
                //添加按钮
                this.addRow(moveBtn);
            }
            if(!this.getDefBtn('custBtnRefreshBtn')){
                let icon ={
                    type:"userCustomIcon",
                    icon:"icon-refresh"
                }
                i18nJson[lang]=this.$ti18('rxList.refreshBtn','刷新');
                let  refreshBtn = {btnId:Util.randomId(),btnLabel:this.$ti18('rxList.refreshBtn', '刷新'),btnIcon:JSON.stringify(icon),
                    i18nJson:JSON.stringify(i18nJson),isDefault:true,btnType:'row',btnName:'custBtn_refreshBtn',btnClick:'custBtnRefreshBtn',buttonStyle:'primary'};
                //添加按钮
                this.addRow(refreshBtn);
            }
        },
        getDefBtn(key){
            let btns =this.$refs.customBtn.dataAction;
            let obj =btns.find(item=>{
                return item.btnClick ==key;
            });
            return obj;
        },
        //设置中文、英文默认值
        setOtherDefaultI18nVal(btn){
            let langs=I18Parse.handleLanList();
            if(!langs || langs.length==0){
                return;
            }
            let self_=this;
            langs.forEach(lang=>{
                if(lang!=this.i18nCurrent){
                    let langVal=self_.defaultBtnI18ns[btn.btnClick];
                    if(langVal){
                        let i18nJson= JSON.parse(btn.i18nJson);
                        i18nJson[lang]=langVal[lang];
                        btn.i18nJson=JSON.stringify(i18nJson);
                    }
                }
            })

        },
        removeRow() {
            var table=this.$refs.customBtn;
            table.removeRows();
            table.selectedRowKeys=[];
            table.selectedRows=[];
            this.$forceUpdate();
        },
        upRow() {
            this.$refs.customBtn.moveUp();
        },
        downRow() {
            this.$refs.customBtn.moveDown();
        },
        openPreCondSetting(record) {
            var config = {
                curVm: this, widthHeight: ['800px', '600px'],
                component: CustomButtonMoreConfig,
                data: {
                    config: record.btnPreCond
                },
                title: this.i18n('form.buttonConfiguration','按钮配置')
            };
            Util.open(config, function (action, data) {
                if (action == "ok") {
                    record.btnPreCond = data;
                    record.isSetedPreCondition = true
                }
            });
        },
        clearPreCondition(record){
            this.$confirm({
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: this.i18n('sureDelete','确认删除配置吗?'),
                zIndex: 20000,
                onOk() {
                    record.btnPreCond="";
                    record.isSetedPreCondition=false;
                },
                onCancel() {},
                okText:this.$ti18('rxForm.ackBtn','确认'),
                cancelText:this.$ti18('rxForm.cancelBtn','取消')
            });
        }
    }
}
</script>

<style scoped>
.rx-mobile-grid-toolbar{
    padding-bottom:10px;
}
.rx-mobile-grid-toolbar button{
    margin-right: 6px;
}
.rx-mobile-grid-toolbar .rx-modile-button{
    background-color: #f5f7fa;
}
.rx-mobile-grid-toolbar .rx-modile-button:focus,
.rx-mobile-grid-toolbar .rx-modile-button:active{
    border-color: #d9d9d9;
    color: rgba(0,0,0,.65);
}
.rx-mobile-grid-toolbar .rx-modile-del:hover{
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
}
.rx-mobile-grid-box{
    margin-bottom: 40px;
}

.rx-card-item-imgbox{
    position: absolute;
    top: 1px;
    right: 2px;
    color: white;
    font-size: 13px;
    z-index: 99;
}
.button-input-number{
    display: flex;
    align-items: center;
}
.button-from-list{
    display: flex;
}
.button-from{
    padding:0px 23px;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #dadde0;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    position: relative;
}
.button-from-hover{
    border: solid 1px #1890ff;
}
.button-from-hover:before{
    content: "";
    border-top: 15px solid #2e86ff;
    border-right: 15px solid #2e86ff;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
    top: -1px;
    right: -1px;
    position: absolute;
    z-index: 2;
}
.button-from:hover{
    border: solid 1px #1890ff;
}
.button-from span{
    color: #1890ff;
    height: 10px;
    display: flex;
    align-items: center;
    line-height: 10px;
}
.button-from span i {
    margin-right: 5px;
}
.button-from span:first-child{
    padding-right: 10px;
}
.button-from span:nth-child(2){
    padding-left: 10px;
}
.btnShow{
    display: flex;
}
.btnShow >div:nth-child(1){
    margin-right: 5px;
}
</style>